//最外层div,修改背景色，边框.el-popover 自己写的el-popover
.my-popover {
    background-color: #090d29 !important;
    border-color: #146ebd !important;
    color: white !important;

    //修改下面的小三角，属性名根据组件的placement位置做相应修改
    .el-popper__arrow::before {
        border-bottom-color: #146ebd !important;
        border-right-color: #146ebd !important;
        border-top-color: #146ebd !important;
        border-left-color: #146ebd !important;
        background-color: #090d29 !important;
    }
}

// select弹框样式覆盖
.el-select-dropdown.my-popover {
    .el-select-dropdown__item {
        color: var(--el-white-color);

        &.hover {
            background-color: transparent;
        }

        &.selected,
        &:hover {
            background-color: rgba(20, 110, 189, 0.3);
        }
    }
}

// 时间选择下拉框弹框样式覆盖
.el-picker__popper {
    .el-picker-panel {
        --el-datepicker-header-text-color: #ffffff;
        --el-datepicker-icon-color: #ffffff;
        --el-datepicker-inner-border-color: #093d74;
        --el-datepicker-inrange-bg-color: #093d7466;
        --el-datepicker-inrange-hover-bg-color: #093d74;
        --el-datepicker-active-color: #0079fecc;
        --el-datepicker-border-color: #146ebd;
        --el-white-color: white;
        color: var(--el-white-color);
        background-color: #090d29;

        .el-date-table th {
            border-bottom-color: #093d74;
        }

        .el-date-picker__time-header,
        .el-date-range-picker__time-header {
            .el-input {
                --el-input-border-color: #0069a6;

                .el-input__wrapper {
                    box-shadow: 0 0 0 1px var(--el-input-border-color) inset;
                    background: linear-gradient(
                        360deg,
                        rgba(0, 105, 175, 0.64) 0%,
                        rgba(0, 67, 119, 0.01) 100%
                    );

                    .el-input__inner {
                        color: var(--el-white-color);
                    }
                }
            }

            .el-time-panel {
                background-color: #090d29;

                .el-time-spinner__item {
                    color: var(--el-white-color);
                }

                .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
                    background-color: transparent;
                }

                .el-time-panel__footer {
                    border-top-color: var(--el-datepicker-inner-border-color);

                    .cancel {
                        background-color: transparent;
                        color: var(--el-white-color);
                    }
                }

                .el-time-panel__content::before {
                    border-top-color: var(--el-datepicker-inner-border-color);
                    border-bottom-color: var(
                        --el-datepicker-inner-border-color
                    );
                }
            }
        }

        .el-date-picker__header-label {
            color: var(--el-white-color);
        }

        .el-picker-panel__footer {
            background-color: transparent;

            .el-button {
                --el-button-hover-bg-color: rgba(38, 104, 216, 0.25);
                background-color: rgba(38, 104, 216, 0.25);
                border-color: rgba(8, 164, 240, 0.2);
                color: var(--el-white-color);

                &:not(.is-disabled):hover {
                    color: var(--el-button-hover-text-color);
                    border-color: var(--el-button-hover-border-color);
                    background-color: var(--el-button-hover-bg-color);
                }
            }

            .el-button.is-text {
                background-color: transparent;
                color: var(--el-white-color);
            }
        }
    }
}

// 树形选择器覆盖
.el-tree-select__popper {
    .el-tree {
        --el-tree-node-hover-bg-color: rgba(20, 110, 189, 0.3);
        // background: var(--el-color-primary-light-9);

        .el-select-dropdown__item {
            color: white;
        }

        .el-tree-node.is-current > .el-tree-node__content {
            background-color: transparent;
        }
    }
}

//修改tree的样式 用于暗黑主题
.el-tree {
    // height: 300px;
    // width: 200px;
    background: #090d29;
    overflow: auto;
    color: white;

    .el-tree-node:focus > .el-tree-node__content,
    .is-current {
        background-color: #090d29;
    }

    .el-tree-node__content:hover {
        background-color: #090d29;
    }

    .el-checkbox {
        --el-checkbox-input-border: 2px solid #ffffff;
        --el-checkbox-checked-input-border-color: #09a4f0;
        --el-checkbox-text-color: #ffffff;
        --el-checkbox-checked-text-color: #09a4f0;
        --el-checkbox-checked-icon-color: #09a4f0;
        --el-checkbox-input-width: 16px;
        --el-checkbox-input-height: 16px;

        .el-checkbox__inner {
            background-color: transparent !important;

            &::before {
                border: 2px solid var(--el-checkbox-checked-icon-color);
                top: 3px;
            }

            &::after {
                border-width: 2px;
                border-color: var(--el-checkbox-checked-icon-color);
            }
        }
    }
}

//分页器样式覆盖
.my-pagination.el-select__popper {
    border: 1px solid #146ebd;
    background-color: #090d29;
    color: white;

    .el-select-dropdown__item {
        color: white;
    }

    .el-select-dropdown__item.selected {
        color: var(--el-color-primary);
        background-color: #090d29;
    }

    .el-select-dropdown__item.hover {
        color: white;
        background-color: #090d29;
    }

    .el-select-dropdown__item:hover {
        color: var(--el-color-primary);
        background-color: #090d29;
    }

    .el-popper__arrow::before {
        border-bottom-color: #146ebd !important;
        border-right-color: #146ebd !important;
        border-top-color: #090d29 !important;
        border-left-color: #090d29 !important;
        background-color: #090d29 !important;
    }
}

//select 向下展开样式覆盖
.el-popper {
    border: 1px solid #146ebd !important;
    background-color: #090d29;

    .el-select-dropdown__wrap {
        background-color: #090d29;
    }

    .el-select-dropdown__item {
        color: white;
        background-color: #090d29;
    }

    .el-select-dropdown__item.selected {
        color: var(--el-color-primary);
        background-color: #090d29;
    }

    .el-select-dropdown__item:hover {
        color: var(--el-color-primary);
        background-color: #090d29;
    }

    .el-popper__arrow::before {
        border-bottom-color: #090d29 !important;
        border-right-color: #090d29 !important;
        border-top-color: #146ebd !important;
        border-left-color: #146ebd !important;
    }
}

//弹框中的输入框样式
.el-input.is-disabled {
    .el-input__wrapper {
        box-shadow: 0 0 0 1px
            var(--el-input-border-color, var(--el-border-color)) inset;
    }
}

.el-message-box {
    --el-bg-color: #090d29;
    --el-messagebox-title-color: white;
    --el-border-color-lighter: #146ebd;
    --el-messagebox-content-color: white;

    .el-message-box__headerbtn {
        color: #ffffff !important;
    }

    .el-button--primary {
        --el-button-bg-color: rgba(38, 104, 216, 0.25);
        --el-button-hover-bg-color: rgba(38, 104, 216, 0.25);
        --el-button-border-color: rgba(8, 164, 240, 0.2);
        --el-button-hover-border-color: rgba(8, 164, 240, 1);
        --el-button-hover-text-color: rgba(8, 164, 240, 1);
        --el-button-text-color: white;
    }
}

.el-form-item__label {
    color: #ffffff;
}

.el-breadcrumb__inner {
    --el-text-color-regular: #ffffff;
}

.el-menu-item.is-active {
    --el-menu-hover-bg-color: #071f45;
}

.el-textarea__inner {
    --el-input-bg-color: #071f45;
    --el-border-color: #0069a6;
    box-shadow: 0 0 0 1px #0069a6 inset;
    --el-input-text-color: white;
}

.el-input__count {
    --el-fill-color-blank: transparent;
    --el-color-info: white;
}

.el-popper.is-light {
    --el-bg-color-overlay: #071f45;
}

.my-popper {
    .el-popper__arrow::before {
        border-bottom-color: #146ebd !important;
        border-right-color: #146ebd !important;
        border-top-color: #090d29 !important;
        border-left-color: #090d29 !important;
    }

    color: white;
}

.el-card {
    --el-card-bg-color: #090d29 !important;
    --el-text-color-primary: white;
    --el-card-border-color: #146ebd;
}
.el-drawer {
    .el-drawer__title {
        color: white;
    }
    background-color: #090d29;
    .el-form-item__label {
        color: white;
    }
    .el-collapse-item__header {
        background-color: #090d29;
        color: white;
    }
}
.el-tabs__item,
.el-descriptions__title {
    color: white;
}
.el-popper.is-pure.is-light.el-select__popper.el-tree-select__popper {
    z-index: 999999 !important;
}
